<template>
  <div class="mask">
    <div class="box">
      <p class="p1">
      <div class="line"></div>
      <h2>新增账号</h2>
      <el-icon @click="close">
        <close-bold />
      </el-icon>
      </p>
      <div class="mbox">
        <el-form :model="form">
          <el-form-item label="账户账号" :rules="[{ required: true }]">
            <el-input style="width: 399px; height: 40px" placeholder="请输入用户账号" v-model="form.admin"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码" :rules="[{ required: true }]">
            <el-input style="width: 399px; height: 40px" placeholder="请输入账户登陆密码" ></el-input>
          </el-form-item>
          <el-form-item label="账号类型" :rules="[{ required: true }]">
            <el-radio label="1" v-model="form.id" @click="noshow">承建商账号</el-radio>
            <el-radio label="2" v-model="form.id" @click="ishow">班组账号</el-radio>
          </el-form-item>
          <div class="hid">
            <el-form-item label="所属承建商" :rules="[{ required: true }]">
              <el-select placeholder="---请选择---" style="width: 399px; height: 40px" v-model="form.shang">
                <el-option v-for="item in ishang" :key="item" :label="item" :value="item"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="所属班组" :rules="[{ required: true }]" v-show="ihidden">
              <el-select placeholder="---请选择---" style="width: 399px; height: 40px" v-model="form.class">
                <el-option v-for="item in iclass" :key="item" :label="item" :value="item"></el-option>

              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="关联人员" :rules="[{ required: true }]">
            <el-input style="width: 399px; height: 40px" placeholder="请输入关联人员" v-model="form.renyuan"></el-input>
          </el-form-item>
          <el-form-item label="联系手机" :rules="[{ required: true }]">
            <el-input style="width: 399px; height: 40px;background: rgba(228, 228, 228, 1) ;" placeholder="请输入员工联系手机"
              v-model="form.phone"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <br>
      <hr />
      <div class="but">
        <el-form-item>
          <el-button type="primary" style="background-color: #FF9900; border: none;" @click="saveFn">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import { reactive, watch, ref } from "vue";
import { ElMessage } from "element-plus";
import service from "../../../utils/service";
import { useRouter } from "vue-router";
const $router = useRouter();

// 声明事件
const emit = defineEmits<{
  (e: "hideen"): void;
  (e: "updatesuccessen"): void;
}>();
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hideen");
};
// input框的隐藏
const ihidden = ref(false)
// 点击按钮2让框出现
const ishow = () => {
  ihidden.value = true
}
// 点击按钮1让框出现
const noshow = () => {
  ihidden.value = false
}

const ishang = reactive(["中建八局", "中铁二建"]);
const iclass = reactive(["中建八局施工一队", "中建八局施工二队"]);
interface Iform {
  "id": string;
  "admin": string;
  "renyuan": string;
  "phone": string;
  "program": string;
  "shang": string;
  "class": string;
  "status": string;
}

const form = reactive<Iform>({
  "id": "",
  "admin": "",
  "renyuan": "",
  "phone": "",
  "program": "",
  "shang": "",
  "class": "",
  "status": "",
});


// 新增完成后的保存
const saveFn = () => {
  if (!form.admin) {
    ElMessage({
      message: "添加数据为空",
      type: "warning",
    });
  }
  service({
    url: "adminlist",
    method: "post",
    data: form,
  }).then((res) => {
    if (form.admin) {
      ElMessage({
        message: "添加成功！",
        type: "success",
      });
      emit("hideen");
      emit("updatesuccessen");
      $router.push("/mpage/zhanghao");

    }
  });
}
</script>

<style scoped>
.mask {
 /* 遮罩层的写法 */
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.box {
  width: 627px;
  height: 557px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  /* overflow: auto; */
}

.hid {
  width: 500px;
  height: 110px;
}

.line {
  position: absolute;
  left: 0px;
  top: 10px;
  width: 5px;
  height: 22px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2 {
  font-size: 16px;
  color: #666666;
  font-weight: 800;
  margin-top: 8px;
  margin-left: 16px;
}

.but {
  margin-top: 16px;
  margin-left: 400px;
}

.mbox {
  width: 500px;
  height: 400px;
  margin: auto;
}
</style>